<template>
  <div class="text-center">
    <p class="text-xl mb-5">{{ msg }}</p>
    <el-form :model="form" :rules="rules" ref="formRef">
      <el-form-item label="账号" prop="name">
        <el-input v-model="form.name" />
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { ElMessage, FormInstance, FormRules } from 'element-plus'

const { msg } = defineProps<{ msg: string }>()

interface FormType {
  name: string
  password: string
}

const formRef = ref<FormInstance>()

const form = ref<FormType>({
  name: '',
  password: ''
})

const rules = reactive<FormRules<FormType>>({
  name: {
    required: true,
    message: '请输账号',
    trigger: 'blur'
  },
  password: {
    required: true,
    message: '请输入密码',
    trigger: 'blur'
  }
})

const submit = async () => {
  const valid = await formRef.value?.validate()
  if (!valid) return

  ElMessage.success(`账号: ${form.value.name} 密码: ${form.value.password}`)
}

defineExpose({
  submit
})
</script>

<style scoped lang="scss"></style>
